<template>
  <div class="form form-field">
      <FieldsetPanel v-for="fieldset in fieldsetList" :fieldset="fieldset" :key="fieldset.code"></FieldsetPanel>
      <SlavePanel v-if="setting.hasSlave && model.slaves"></SlavePanel>
  </div>
</template>

<script>
/*
form 重置开发
分离独立业务逻辑 主组件保留对外接口与内部协调功能
*/
import moduleStore from "field/store/index";
import FieldsetPanel from "./fieldset";
import SlavePanel from "./slavePanel";
import $ from "@/common";
export default {
  moduleStore,
  name: "form",
  computed: {
    fieldsetList() {
      var data = [];
      var list = this.fieldsetData;

      for (let i in this.fieldsetData) {
        this.fieldsetData[i].fields = [];
      }

      for (let i in this.model.fields) {
        var field = this.model.fields[i];
        if (list[field.fieldset]) {
          list[field.fieldset].fields.push(field);
        } else {
          list.default.fields.push(field);
        }
      }
      for (let i in list) {
        data.push(list[i]);
      }
      return data.sort((a, b) => {
        return a.index - b.index;
      });
    },
    //生成字段组数据
    fieldsetData() {
      var list = {
        top: {
          code: "top",
          fields: [],
          index: 0,
          collapse: false
        },
        default: {
          code: "default",
          fields: [],
          index: 99,
          collapse: false
        },
        bottom: {
          code: "bottom",
          fields: [],
          index: 999,
          collapse: false
        }
      };
      if (this.model.fieldset) {
        this.model.fieldset.forEach((item, index) => {
          if (list[item.code]) {
            list[item.code] = $.setObj(item, list[item.code]);
          } else {
            list[item.code] = {
              collapse: false,
              ...item,
              fields: [],
              index: index + 1
            };
          }
        });
      }
      return list;
    }
  },
  methods: {

  },
  created() {
    this.setModel({});
  },
  components: {
    FieldsetPanel,
    SlavePanel
  }
};
</script>

<style>

</style>
